<template>
  <div class="header_simple">
    <!-- 顶部简单导航 -->
    <van-nav-bar
      :title="title"
      left-arrow
      @click-left="goBack"
      class="header"
    >
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  props: {
    // 顶部标题
    title: {
      type: String,
    }
  },
  watch: {
    // 监听标题变化
    title: {
      handler(val) {
        this.title = val
      },
      deep: true
    }
  },
  methods: {
    goBack() {
      this.$emit('goBack')
    }
  }
};
</script>

<style scoped lang="less">
@deep: ~">>>";
.header_simple {
  .header {
    width: 100%;
    @{deep} .van-nav-bar__title {
      font-size: 19px;
      font-family: SourceHanSansCN;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
    }
    @{deep} .van-icon {
      font-size: 19px;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
  }
}
</style>
